<template>
	<view class="container">
		<u-search :showAction="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入姓名或学号"
			v-model="keyword" @custom="performSearch()" @clear="onClear()"></u-search>
		<view class="action-buttons">
			<u-button type="primary" @click="importDialog=true">数据导入</u-button>
			<!-- 输入框，v-model 用于双向绑定，@blur 事件监听输入完成后执行搜索 -->
			<input v-model="moRenClass" @blur="search" :class="inputClass" placeholder="班级名" />
			<!-- <u--input v-model="moRenClass" @blur="search" :class="inputClass" placeholder="班级名"></u--input> -->
		</view>
		<!-- 弹出层 -->
		<u-popup :show="importDialog" mode="center" border-radius="10">
			<view style="padding: 20px; width: 80%; max-width: 400px; background-color: #fff;">
				<u--form labelPosition="left" :model="importLink" ref="importForm">
					<u-form-item label="数据链接" borderBottom>
						<u--input v-model="importLink.url" placeholder="请输入链接"></u--input>
					</u-form-item>
				</u--form>
				<div style="display: flex; justify-content: space-between;">
					<u-button type="primary" text="确认" @click="confirmImport()"
						style="flex: 1; margin-right: 10px;"></u-button>
					<u-button color="#c8c9cc" text="取消" @click="importDialog=false" style="flex: 1;"></u-button>
				</div>
			</view>
		</u-popup>
		<div class="loader" v-if="loading"></div>
		<!-- 表格展示 -->
		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="50" align="center">学号</uni-th>
				<uni-th width="100" align="center">姓名</uni-th>
				<uni-th width="50" align="center">班级</uni-th>
			</uni-tr>
			<uni-tr v-for="(student, index) in students" :key="index">
				<uni-td align="center">{{ student.student_id }}</uni-td>
				<uni-td align="center">
					<view class="name">{{ student.name }}</view>
				</uni-td>
				<uni-td align="center">{{ student.student_class }}</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>
<script>
	import * as XLSX from 'xlsx'; // 引入 xlsx 库
	export default {
		data() {
			return {
				keyword: '',
				moRenClass: uni.getStorageSync('默认班级') || '718', // 从缓存中读取默认班级
				students: [], // 学生列表
				importDialog: false, //导入
				importLink: {
					url: '',
				},
				inputClass: 'default-input', // 默认样式类
				loading: false, // 控制加载图标的显示与隐藏
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 搜索方法
			search() {
				console.log('搜索方法执行', this.moRenClass);
				uni.setStorageSync('默认班级', this.moRenClass); // 存储到本地缓存
				// 在这里可以执行你自己的搜索逻辑
				this.getData()
			},
			confirmImport() {
				console.log('正在访问:', this.importLink.url);
				// 访问链接获取数据的逻辑
				this.fetchAndParseExcel(this.importLink.url);
				this.importDialog = false
			},
			fetchAndParseExcel(url) {
				// 使用 uni.request 下载文件
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer', // 确保以二进制格式接收文件
					success: (res) => {
						if (res.statusCode === 200) {
							// 下载成功，开始解析文件
							this.parseExcel(res.data);
						} else {
							console.error('文件下载失败:', res.statusCode);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					},
				});
			},

			// 解析 Excel 数据
			parseExcel(data) {
				try {
					// 将二进制数据转换为工作簿对象
					const workbook = XLSX.read(data, {
						type: 'array'
					});

					// 选择要解析的工作表（假设是第一个工作表）
					const worksheet = workbook.Sheets[workbook.SheetNames[0]];

					// 将工作表转换为 JSON 格式（数组）
					const jsonData = XLSX.utils.sheet_to_json(worksheet, {
						header: 1
					}); // header: 1 表示使用第一行作为列标题

					// 将原始数据转换为目标格式
					let students = [];
					students = jsonData.slice(1).map(row => {
						return {
							student_class: row[0], // 班级
							name: row[1], // 姓名
							student_id: row[3], // 座号（学号）
						};
					});
					// 插入数据时显示加载图标
					this.loading = true;
					console.log('转换后的学生数据:', students);
					students.forEach(item => {
						this.$dbUtils.addTabItem('testDb', 'gradeStudents', item);
					});
					// 插入完成后隐藏加载图标
					this.loading = false;
					uni.showToast({
						title: '导入成功',
						icon: 'success'
					});
					this.getData()
				} catch (error) {
					console.error('Excel 解析失败:', error);
				}
			},
			// fetchDataFromUrl(url) {
			// 	// 示例：使用uni.request访问URL获取数据
			// 	uni.request({
			// 		url: url,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res.data);
			// 			// 分割字符串
			// 			const items = res.data.split(/\s+/); // 使用正则表达式分割字符串
			// 			const students = [];

			// 			// 每行有5个字段，分别是班级、姓名、考号、座号、成绩
			// 			for (let i = 0; i < items.length; i += 5) {
			// 				if (items[i + 3]) { // 确保有座号（学号）
			// 					students.push({
			// 						student_class: items[i], // 班级
			// 						name: items[i + 1], // 姓名
			// 						student_id: parseInt(items[i + 3], 10) // 座号（学号）
			// 					});
			// 				}
			// 			}

			// 			// console.log("==处理好的学生数组==:" + students[0]); // 输出解析后的学生数据
			// 			console.log("==处理好的学生数组==:" + JSON.stringify(students[0]));

			// 			students.forEach(item => {
			// 				this.$dbUtils.addTabItem('testDb', 'gradeStudents', item);
			// 			});
			// 			uni.showToast({
			// 				title: '导入成功',
			// 				icon: 'success'
			// 			});
			// 			this.getData()
			// 		},
			// 		fail: (err) => {
			// 			console.error('请求失败', err);
			// 		}

			// 	});
			// },
			// 清空时刷新
			onClear() {
				console.log('搜索框已清空');
				// 清空时执行查询的方法
				this.getData();
			},
			// 模拟搜索
			performSearch() {
				// 模拟搜索逻辑
				const value = this.keyword;
				if (value) {
					console.log(`正在搜索关键词: ${value}`);
					this.$dbUtils.selectXmXhDataLike('testDb', 'gradeStudents', ['name', 'student_id'], value, {
							'student_class': this.moRenClass
						})
						.then(results => {
							console.log("模糊查询成功:", results);
							this.students = results
						})
						.catch(error => {
							console.error("模糊查询失败:", error);
						});
				} else {
					this.getData();
					console.warn('请输入搜索关键词');
				}
			},
			// 获取数据
			getData() {
				// this.$dbUtils.selectDataList('testDb', 'gradeStudents', {
				// 		'student_class': this.moRenClass
				// 	})
				this.$dbUtils.selectXmXhDataLike('testDb', 'gradeStudents', ['name', 'student_id'], this.keyword, {
						'student_class': this.moRenClass
					})
					.then(results => {
						console.log("查询成功:", results);
						// 在这里处理查询结果
						this.students = results
					})
					.catch(error => {
						console.error("查询失败:", error);
					});
			},
			// 获取单个数据
		}
	};
</script>
<style scoped>
	.loader {
		position: fixed;
		/* 固定定位 */
		top: 50%;
		/* 垂直居中 */
		left: 50%;
		/* 水平居中 */
		transform: translate(-50%, -50%);
		/* 通过偏移使其真正居中 */
		width: 50px;
		aspect-ratio: 1;
		display: grid;
		z-index: 999;
	}

	.loader::before,
	.loader::after {
		content: "";
		grid-area: 1/1;
		--c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
		background:
			var(--c) 50% 0,
			var(--c) 50% 100%,
			var(--c) 100% 50%,
			var(--c) 0 50%;
		background-size: 12px 12px;
		animation: l12 1s infinite;
	}

	.loader::before {
		margin: 4px;
		filter: hue-rotate(45deg);
		background-size: 8px 8px;
		animation-timing-function: linear;
	}

	@keyframes l12 {
		100% {
			transform: rotate(.5turn);
		}
	}

	/* 默认输入框样式 */
	.default-input {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
		font-size: 14px;
	}

	/* 聚焦时的输入框样式 */
	.default-input:focus {
		border-color: #66afe9;
		outline: none;
		box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
	}

	/* 鼠标悬停时输入框样式 */
	.default-input:hover {
		border-color: #888;
	}

	.container {
		padding: 20rpx;
	}

	.action-buttons {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		/* 默认是row，可省略 */
		justify-content: space-between;
		/* 根据需要调整对齐方式 */
		gap: 10px;
		/* 按钮之间的间距 */
	}

	.student-table {
		margin-top: 20rpx;
	}

	.form-content {
		padding: 20rpx;
	}

	.delete-content {
		text-align: center;
		padding: 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>